 @import '../../../../../assets/css/function.scss';
.mix{
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 250;
  height: auto!important;
  .mix-top{
    display: flex;
    align-items: center;
    height: px2rem(85px);
    p{
      flex: 3;
      text-align: center;
      font-size: px2rem(28px);
      color: #505050;
      span{
        color: #9f9f9f;
      }
    }
    p:nth-child(2){
      flex: 1;
      color: #9f9f9f;
    }
  }
  .mix-table{
    width: px2rem(686px);
    margin: 0 auto px2rem(30px);
    p{
      margin-bottom: px2rem(10px);
      font-size: px2rem(28px);
      color: #505050;
      b{
        font-weight: 400;
      }
    }
    table{
      width: 100%;
      border: 1px solid #f0f0f0;
      tbody{
        tr{
          height: px2rem(76px);
          td:first-of-type{
            width: px2rem(46px);
            text-align: center;
            color: #fff;
            font-size: px2rem(26px);
          }
        }
        td{
          text-align: center;
          border: 1px solid #f0f0f0;
          position: relative;
          p{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 40;
            margin: 0;
          }
          div{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
          span{
            color: #505050;
            font-size: px2rem(28px);
          }
          span:nth-child(2){
            color: #9f9f9f;
            margin-left: px2rem(10px);
          }
        }
      }
      .wks{
        width: 93%!important;
        color: #505050!important;
        font-size: px2rem(28px)!important;
      }
    }
    .selected{
        background: #e85504!important;
        box-sizing: border-box;
        border-right: 1px solid #fff;
        color: #fff!important;
        span{
            color: #fff!important;
        }
        b{
            color: #fff!important;
        }
    }
  }
  .mix-table:nth-child(2){
    table{
      td:nth-child(1){
        background: #f5ac41;
      }
    }
  }
  .mix-table:nth-child(3){
    table{
      td:nth-child(1){
        background: #85a5e1;
      }
    }
  }
  .mix-table:nth-child(4){
    table{
      td:nth-child(1){
        background: #6cd6c4;
      }
    }
  }
  .mix-table:nth-child(5){
    table{
      tr{
        td{
          width: 31%;
        }
      }
    }
  }
  .confim_btn{
    display: flex;
    border-top: 1px solid #f0f0f0;
    p{
      flex: 1;
      height: 0.96rem;
      border-right: 1px solid #f0f0f0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
      line-height: 0.96rem;
      font-size: 0.34667rem;
      color: #e85504;
    }
    p:last-of-type{
      border: none;
      color: #505050;
    }
  }
}
